.appointment-page {
  .search-form {
    margin-bottom: 24px;

    .ant-form-item {
      margin-bottom: 16px;
      
      .ant-input-affix-wrapper {
        width: 100%;
      }

      .ant-select {
        width: 100%;
      }

      .ant-picker {
        width: 100%;
      }
    }
  }

  .operation-bar {
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-start;
    gap: 8px;

    .ant-btn {
      display: flex;
      align-items: center;
      
      .anticon {
        margin-right: 4px;
      }
    }
  }

  .appointment-table {
    .ant-table {
      .ant-table-thead > tr > th {
        background: #fafafa;
        font-weight: 500;
      }

      .ant-table-row {
        &:hover {
          .ant-table-cell {
            background: #f5f5f5;
          }
        }
      }

      .status-tag {
        min-width: 60px;
        text-align: center;
      }

      .action-column {
        .ant-btn {
          padding: 0 8px;
          
          &:not(:last-child) {
            margin-right: 8px;
          }
        }
      }
    }
  }

  .detail-drawer {
    .ant-drawer-body {
      padding: 24px;
      background: #fff;

      .ant-descriptions {
        .ant-descriptions-item {
          padding-bottom: 16px;

          .ant-descriptions-item-label {
            color: #666;
            font-weight: 500;
            width: 100px;
          }

          .ant-descriptions-item-content {
            color: #333;
          }

          .ant-tag {
            margin-right: 0;
          }
        }
      }
    }
  }
}
